<script setup>
import {useRoute} from "vue-router";
import {ref, watch} from "vue";

const route = useRoute()
const computerDetail = ref({})
computerDetail.value = route.params.detail

console.log("路由传参获取到的detail："+computerDetail)

import {useComputerStore} from "@/stores/useComputer.js";
const computerStore = useComputerStore()

const isShowInfo = ref(false)
if (computerStore.info != null) {
  isShowInfo.value = true
}

const nowPoint = ref(10)
// setInterval(()=>{
//   nowPoint.value--
// },1000)
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

//语音播报
const speak = (text) => {
  if ('speechSynthesis' in window) {
    const msg = new SpeechSynthesisUtterance(text)
    window.speechSynthesis.speak(msg)
  }else {
    alert('您的浏览器不支持语音播报')
  }
}

const notifyBalance = (balance)=>{
  if (balance < 800) {
    speak('您的余额仅剩'+ balance +'元，请及时充值！')
  }
}

if (computerStore.info != null) {
  notifyBalance(computerStore.info.usableBalance)
}

/*watch(computerStore.info.usableBalance)=>{
  notifyBalance(computerStore.info.usableBalance)
}*/


</script>

<template>
  <div class="first-container">

    <el-descriptions title="上机信息" v-if="isShowInfo">
      <el-descriptions-item label="使用者">{{computerStore.info.username}}</el-descriptions-item>
      <el-descriptions-item label="正在使用">{{ computerStore.detail }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ computerStore.info.startTime }}</el-descriptions-item>
      <el-descriptions-item label="可用时长">
        <el-tag size="small">
          {{ computerStore.info.usableTime }}
          <span v-if="computerStore.info.usableTime != null || computerStore.info.usableTime != ''">h</span>
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="可用余额">
        {{ computerStore.info.usableBalance }}
        <span v-if="computerStore.info.usableBalance != null || computerStore.info.usableBalance != ''">元</span>
      </el-descriptions-item>
    </el-descriptions>

<!--    <div class="demo-progress">
      <el-progress type="circle" :percentage="nowPoint" :color="colors" />
      <el-progress type="circle" :percentage="25" />
      <el-progress type="circle" :percentage="100" status="success" />
      <el-progress type="circle" :percentage="70" status="warning" />
      <el-progress type="circle" :percentage="50" status="exception" />
    </div>-->

      <el-empty description="您还未上机" v-if="isShowInfo == false" image-size="200px"/>
  </div>

</template>

<style scoped>
.first-container {
  height: 580px;
  padding: 20px;
}
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.el-col {
  text-align: center;
}
.el-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>